<template>
	<view class="list">
		<uv-waterfall ref="waterfall" v-model="list" :add-time="10" :column-gap="10" @changeList="changeList">
			<template v-slot:list1>
				<view>
					<view class="item" v-for="item in data_list.list1"
						@click="router(`/pages/my/list?id=${item.product_id}&type=${props.type}`)">
						<view class="cover">
							<image :src="item.product_cover" mode="widthFix"></image>
						</view>
						<view class="name">【{{item.product_name}}】</view>
						<view class="number">
							<view>{{item.total}}份</view>
						</view>
					</view>
				</view>
			</template>
			<template v-slot:list2>
				<view>
					<view class="item" v-for="item in data_list.list2"
						@click="router(`/pages/my/list?id=${item.product_id}&type=${props.type}`)">
						<view class="cover">
							<image :src="item.product_cover" mode="widthFix"></image>
						</view>
						<view class="name">【{{item.product_name}}】</view>
						<view class="number">
							<view>{{item.total}}份</view>
						</view>
					</view>
				</view>
			</template>
		</uv-waterfall>
	</view>
</template>

<script setup>
	import {
		userProduct
	} from "@/request/api";
	import {
		ref,
		reactive,
		watch,
		shallowRef
	} from "vue";
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	const props = defineProps({
		type: [Number, String]
	});
	const emit = defineEmits(['success']);
	const list = ref([]);

	const getList = async () => {
		let res = await userProduct();
		if (props.type == 1) {
			list.value = res.products;
		}
		if (props.type == 2) {
			list.value = res.blindboxs;
		}
		if (props.type == 3) {
			list.value = res.deliverys;
		}
		emit("success", res);
	};
	const data_list = reactive({
		list1: [],
		list2: []
	});
	const changeList = (e) => data_list[e.name].push(e.value);
	const waterfall = shallowRef();
	watch(() => props.type, () => {
		if (waterfall.value) {
			waterfall.value.clear();
			data_list.list1 = [];
			data_list.list2 = [];
		}
		getList();
	}, {
		immediate: true
	});
</script>

<style scoped lang="scss">
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 335rpx;
			height: 100%;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			padding: 22rpx 28rpx;
			box-sizing: border-box;
			background: #2F2F2F;

			.cover {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100%;
				}
			}

			.name {
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 800;
				padding: 20rpx 0;
				box-sizing: border-box;
			}

			.number {
				display: flex;

				&>view {
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					color: #DDF247;
					font-size: 24rpx;
					border-radius: 3rpx;
					padding: 0 22rpx;
					box-sizing: border-box;
					background: rgba(221, 242, 71, 0.1);
				}
			}
		}
	}
</style>